<template>
    <div>
        <div class="search">
            <input class="search-input"
                   type="text"
                   placeholder="输入城市名或者拼音"
                   v-model="keyword"
            >
        </div>
        <div class="search-content"
             ref="search"
             v-show="keyword"
        >
            <ul>
                <li v-for="item in list"
                    :key="item.id"
                    class="search-item border-bottom"
                    @click="handleCityClick(item.name)"
                >
                    {{item.name}}
                </li>
                <li v-show="hasNoData"
                    class="search-item border-bottom"
                >
                    没有匹配结果
                </li>
            </ul>
        </div>
    </div>
</template>

<script>

    import Bscroll from 'better-scroll'
    import {mapMutations} from "vuex";

    export default {
        name: "CitySearch",
        props: {
            cities: Object
        },
        data() {
            return {
                keyword: '',
                list: [],
                timer: null
            }
        },
        computed: {
            hasNoData() {
                return !this.list.length;
            }
        },
        watch: {
            keyword() {
                if (this.timer) {
                    clearTimeout(this.timer)
                }
                if (!this.keyword) {
                    this.list = []
                    return;
                }
                this.timer = setTimeout(() => {
                    const result = [];
                    for (let i in this.cities) {
                        this.cities[i].forEach((value) => {
                            if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
                                result.push(value);
                            }
                        })
                    }
                    this.list = result;
                }, 100)
            }
        },
        mounted() {
            this.scroll = new Bscroll(this.$refs.search);
        },
        updated() {
            this.scroll.refresh();
        },
        methods: {
            handleCityClick(city) {
                // this.$store.commit('changeCity', city);
                this.changeCity(city);
                this.$router.push("/");
            },
            ...mapMutations(['changeCity'])
        }
    }
</script>

<style lang="scss" scoped>

    @import "~@/styles/varibles.scss";

    .search {
        padding: 0 .1rem;
        height: .72rem;
        background: $bgColor;

        .search-input {
            box-sizing: border-box;
            padding: 0 .1rem;
            height: .62rem;
            line-height: .62rem;
            width: 100%;
            text-align: center;
            border-radius: .6rem;
            color: #666666;
        }
    }

    .search-content {
        position: absolute;
        top: 1.58rem;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        background: #eeeeee;
        z-index: 1;

        .search-item {
            line-height: .62rem;
            padding-left: .2rem;
            color: #666666;
            background: #ffffff;
        }
    }

</style>
